<template>
  <div>

    <div>
      <img style="height: 100px; width:100px" :src="userInfo.user_avatar" alt="头像">
      <div>
        <input type="file" @change="handleFileUpload" >
        <button @click="uploadFile">上传</button>
      </div>
    </div>
  
    <el-descriptions class="margin-top" title="" :column="3"  border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="updateUserDialog = true">编辑</el-button>
        </template>
        
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ userInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              性别
            </template>
            <template>
                <span v-if="userInfo.gender == 1">男</span>
                <span v-else-if="userInfo.gender == 0">女</span>
                
            </template>
          </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            账号
          </template>
          {{ userInfo.account }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            年龄
          </template>
          {{ userInfo.age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            住址
          </template>
          {{ userInfo.room.room_code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            身份证
          </template>
          {{ userInfo.idcard }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              用户类型
            </template>
            <template >
                <span v-if="userInfo.user_type == 1">管理员</span>
                <span v-else-if="userInfo.user_type == 2">物业</span>
                <span v-else-if="userInfo.user_type == 3">业主</span>

            </template>
            
          </el-descriptions-item>
        <el-descriptions-item >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              用户状态
            </template>
            <div>
                <span v-if="userInfo.user_status == 31"  >常住业主</span>
                <span v-else-if="userInfo.user_status == 32">租户</span>
                <span v-else-if="userInfo.user_status == 33">未激活</span>

            </div>
            
          </el-descriptions-item>
       
      </el-descriptions>




      <el-dialog
        title="修改基本个人信息"
        :visible.sync="updateUserDialog"
        width="60%"
        >
        <el-form ref="form" label-width="150px">
       
          <el-form-item label="账号"  prop="account">
            <el-input disabled v-model="userInfo.account"></el-input>
          </el-form-item>
        
          <el-form-item label="密码" prop="password" >
            <el-input v-model="newUserInfo.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="newUserInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="年龄"  prop="age" >
            <el-input  v-model="newUserInfo.age" type="number"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="idcard">
            <el-input v-model="newUserInfo.idcard"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <template>
              <el-radio v-model="newUserInfo.gender" label="1">男</el-radio>
              <el-radio v-model="newUserInfo.gender" label="0">女</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateUserDialog = false">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  
</template>

<style scoped>

  input[type="flie"]{
    background-color: none;
  }
  
</style>


<script>
import {baseurl} from '@/param.js'
export default {
  name:"PersonalInfo",
  data() {
      return {
        //用户状态
          // status:"",
          updateUserDialog:false,
          updateStatus:false,
          //修改头像
          selectedFile:"",
          fileType:  [".jpg", ".jpeg", ".png", ".gif", ".bmp"],
          
          userInfo:{
            room:{room_code:"0-0-0",}
          },
          ageRules: [],
          newUserInfo:{
            gender:"",
            idcard:"",
            username:"",
            password:"",
            
          },
          options: [{
          value: '31',
          label: '常住业主'
        }, {
          value: '32',
          label: '租户'
        }],
      }
  },
  methods:{
   
    //修改头像
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (this.selectedFile) {
        // if(this.selectedFile)
        
        var names  = this.selectedFile.name.split('.')
        var sufName = names[names.length - 1]
        // console.log(this.fileType.includes('.'+sufName));
        if(!this.fileType.includes('.'+sufName)){
          alert(`仅支持${this.fileType.join('/')}类型的图片`)
          return
        }
        if(this.selectedFile.size > 1024 * 50){
          alert("文件大小大于50KB")
          return
        }
        const data = new FormData()
        data.append('id',this.userInfo.userid)
        data.append('file',this.selectedFile)

        axios.put(`${baseurl}/user/update/avatar`,data,{
          headers:{
          'Authorization':sessionStorage.getItem('Authorization')
          } 
        }).then(res =>{
          if(res.data.code){
            this.userInfo.user_avatar = res.data.data.url
          }else{
            alert(res.data.data.message)
          }
        }).catch(err => console.log(err.message))
        
      }
    },
    //修改个人基本信息
    updateUserInfo(){
      if(  !this.newUserInfo.gender && !this.newUserInfo.idcard 
      && !this.newUserInfo.username && !this.newUserInfo.age && !this.newUserInfo.password){
        alert("至少修改一个")
        return
      }
      axios.put(`${baseurl}/user/update/byId`,{
        userid:this.userInfo.userid,
          gender:this.newUserInfo.gender,
          idcard:this.newUserInfo.idcard,
          username:this.newUserInfo.username,
          age:this.newUserInfo.age,
          password:this.newUserInfo.password,
        },{
                 
        headers:{
          'Authorization':sessionStorage.getItem('Authorization')
          } 
        }).then(res=>{
          if(res.data.code){
            alert("修改成功")
            this.getUserInfo()
            sessionStorage.setItem("userInfo",JSON.stringify(this.userInfo))
            if(this.newUserInfo.password){
              alert("密码修改，需重新登录")
              sessionStorage.clear()
              this.$router.push("/")
            }
            this.updateUserDialog = false
          }
        }).catch(err=>console.log(err.message))
        
    },
   
    //获取用户信息
    getUserInfo(){
      axios.get(`${baseurl}/user/getUserById/${JSON.parse(sessionStorage.getItem('userInfo')).userid}`,{
        headers:{
          'Authorization':sessionStorage.getItem('Authorization')
          } 
      })
      .then(res => {
        if(res.data.code){
          this.userInfo= res.data.data
        }
      }).catch(err=>console.log(err.message))
    },
  },
  mounted () {
      
      this.getUserInfo()
      
  }
}
</script>